<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtmBox">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="../css/reset-min.css">
<link rel="stylesheet" type="text/css" href="../css/style.css">
<title></title>
</head>

<body>


	<div class="xsWrap">
		<!-- 顶导 -->
		<div class="topNav clearfix">
			<div class="navBox">
				<div class="navSquare"><a class="navMode" href="#"><span class="navLTxt">广场</span><em class="xsIcon navMore"></em></a>
					<div class="squareLayer">
						<ul class="layerColor">
							<li class="layerL"><a href="#" class="colorIcon photoBox"><span class="xsIcon icon_photoS"></span></a><a class="colorTxt" href="#" >摄影</a></li>
							<li class="layerL"><a href="#" class="colorIcon beautyBox"><span class="xsIcon icon_beautyS"></span></a><a class="colorTxt" href="#" >美妆服饰</a></li>
							<li class="layerL"><a href="#" class="colorIcon beautyBox"><span class="xsIcon icon_foodS"></span></a><a class="colorTxt" href="#" >美食</a></li>
							<li class="layerL"><a href="#" class="colorIcon sportBox"><span class="xsIcon icon_sportS"></span></a><a class="colorTxt" href="#" >运动</a></li>
							<li class="layerL"><a href="#" class="colorIcon techBox"><span class="xsIcon icon_techS"></span></a><a class="colorTxt" href="#" >科技生活</a></li>
							<li class="layerL"><a href="#" class="colorIcon gameBox"><span class="xsIcon icon_gameS"></span></a><a class="colorTxt" href="#" >游戏</a></li>
							<li class="layerL"><a href="#" class="colorIcon homeBox"><span class="xsIcon icon_homeS"></span></a><a class="colorTxt" href="#" >家居设计</a></li>
							<li class="layerL"><a href="#" class="colorIcon petBox"><span class="xsIcon icon_petS"></span></a><a class="colorTxt" href="#" >宠物</a></li>
							<li class="layerL"><a href="#" class="colorIcon musicBox"><span class="xsIcon icon_musicS"></span></a><a class="colorTxt" href="#" >音乐</a></li>
							<li class="layerL"><a href="#" class="colorIcon carBox"><span class="xsIcon icon_carS"></span></a><a class="colorTxt" href="#" >汽车</a></li>

						</ul>					

					</div>

				</div>
				<div class="navSearch">
					<div class="navSearBox"><input type="text" placeholder="请输入关键字" class="navSearInput"><span class="xsIcon icon_search"></span></div>
				</div>
			</div>

			<div class="navR">
				<!-- 已登录 -->
				<ul class="navRList clearfix">
					<li class="navli userAdd"><a class="navMode" href=""><span class="xsIcon icon_add"></span></a>
						<!-- 发布弹层 点击【+】出现 -->
						<div class="pubLayer">
							<p class="pubLi"><a href="#" class="logLiTxt">发布文章</a></p>
							<!-- 点击【发布专辑】出现 创建专辑弹层 -->	
							<p class="pubLi"><a href="#" class="logLiTxt">创建专辑</a></p>	
						</div>
						<!-- /发布弹层 -->
					</li>
					<li class="navli usermsg"><a class="navMode" href=""><span class="xsIcon icon_msg"></span><em class="msgNum">99+</em></a></li>
					<li class="navli userNotice"><a class="navMode" href=""><span class="xsIcon icon_notice"></span></a>
						<div class="noticeLayer">
							<p class="noticeTit">我的消息</p>
							<!-- 通知弹层 点击【我的消息】出现 -->
							<div class="noticeListBox">
								<ul class="noticeList">
									<li class="clearfix">
										<a class="noticeImg"><img src="../images/userS.jpg" alt></a>
										<div class="noticeMain">
											<p class="noticeName"><a class="nameTxt">用户昵称八个字啊</a></p>
											<p class="noticeCon">转采了你的专辑<a class="noAlName">小小花蛤</a>到<a class="noAlNameT">小小花蛤</a></p>
										</div>
									</li>
									<li class="clearfix">
										<a class="noticeImg"><img src="../images/userS.jpg" alt></a>
										<div class="noticeMain">
											<p class="noticeName"><a class="nameTxt">用户昵称八个字啊</a></p>
											<p class="noticeCon">转采了你的专辑<a class="noAlName">小小花蛤</a>到<a class="noAlNameT">小小花蛤</a></p>
										</div>
									</li>
									<li class="clearfix">
										<a class="noticeImg"><img src="../images/userS.jpg" alt></a>
										<div class="noticeMain">
											<p class="noticeName"><a class="nameTxt">用户昵称八个字啊</a></p>
											<p class="noticeCon">转采了你的专辑<a class="noAlName">小小花蛤</a>到<a class="noAlNameT">小小花蛤</a></p>
										</div>
									</li>
									<li class="clearfix">
										<a class="noticeImg"><img src="../images/userS.jpg" alt></a>
										<div class="noticeMain">
											<p class="noticeName"><a class="nameTxt">用户昵称八个字啊</a></p>
											<p class="noticeCon">转采了你的专辑<a class="noAlName">小小花蛤</a>到<a class="noAlNameT">小小花蛤</a></p>
										</div>
									</li>									
								</ul>
								<p class="noticeMore"><a class="noticeMoreTxt">查看所有消息>></a></p>
							</div>
							<!-- /通知弹层 -->
						</div>

					</li>
					<li class="navli userLog"><a class="navMode" href=""><img src="../images/userS.jpg" alt="" class="headImg"><em class="xsIcon navMore"></em></a>
						<!-- 用户弹层 -->
						<div class="logLayer">
							<p class="logLi"><a href="#" class="logLiTxt">消息箱</a></p>	
							<p class="logLi"><a href="#" class="logLiTxt">用户设置</a></p>	
							<p class="logLi"><a href="#" class="logLiTxt">退出登录</a></p>	
						</div>
						<!-- /用户弹层 -->
					</li>
				</ul>
				<!-- /已登录 -->

				<!-- 未登录 
				<div class="unLogList"><a class="btnB" href="#">登录</a><a class="btnB" href="#">注册</a></div>
				 /未登录 -->

			</div>

			<div class="navLogo"><a class="logoBox"><img src="../images/logoM.png" alt=""></a></div>
		</div>
		<!-- /顶导 -->
		<!-- main -->
		<div class="mainBox clearfix">

			<!-- 分类nav -->
			<div class="sortsNav">
				<div class="sortsFbox clearfix">
					<h3 class="sortsTit">摄影</h3>
				</div>
				<div class="showMain clearfix">
					<div class="showNavBox clearfix">
						<ul class="showNav">
							<li><a class="showMod" href="#">200 文章</a></li>
							<li><a class="showMod cur" href="#">200 专辑</a></li>
						</ul>
					</div>

				</div>
			</div>
			<!-- /分类nav -->

			<!-- 瀑布流 -->
			<div class="fallMain">
				<div class="falling clearfix">
					<ul class="fallList albumfall">
						<!-- 添加专辑 -->
						<li>
							<div class="addAlbumMain">
								<a class="albumAddBox" href="#">
									<span class="albumAdd"></span>
									<p class="albumAddTxt">添加专辑</p>
								</a>
							</div>
				
						</li>
						<!-- /添加专辑 -->
						<li>
							<div class="albumMain">
								<a class="albumImgBox" href="#">
									<div class="albumP1"><img src="../images/pic1.jpg" alt="" class="albumPic1"></div>
									<div class="albumPO clearfix">
										<p class="albumP2"><img src="../images/pic3.jpg" alt="" class="albumPic2"></p>
										<p class="albumP2"><img src="../images/pic3.jpg" alt="" class="albumPic2"></p>
										<p class="albumP2"><img src="../images/pic3.jpg" alt="" class="albumPic2"></p>
									</div>
								</a>
							</div>
							<div class="albumACBox clearfix">
								<p class="albumTit">
									<a class="albumName" href="#">一二三四五六七八专辑名专辑名</a>
								</p>								
								<p class="albumAtt"><a class="btnC" href="#">关注</a></p>
							</div>						
						</li>
					</ul>
					<ul class="fallList">
						<li>
							<div class="albumMain">
								<a class="albumImgBox" href="#">
									<div class="albumP1"><img src="../images/pic1.jpg" alt="" class="albumPic1"></div>
									<div class="albumPO clearfix">
										<p class="albumP2"><img src="../images/pic3.jpg" alt="" class="albumPic2"></p>
										<p class="albumP2"><img src="../images/pic3.jpg" alt="" class="albumPic2"></p>
										<p class="albumP2"><img src="../images/pic3.jpg" alt="" class="albumPic2"></p>
									</div>
								</a>
							</div>
							<div class="albumACBox clearfix">
								<p class="albumTit">
									<a class="albumName" href="#">一二三四五六七八</a>
								</p>								
								<p class="albumAtt"><a class="btnC" href="#">关注</a></p>
							</div>						
						</li>
						<li>
							<div class="albumMain">
								<a class="albumImgBox" href="#">
									<div class="albumP1"><img src="../images/pic1.jpg" alt="" class="albumPic1"></div>
									<div class="albumPO clearfix">
										<p class="albumP2"><img src="../images/pic3.jpg" alt="" class="albumPic2"></p>
										<p class="albumP2"><img src="../images/pic3.jpg" alt="" class="albumPic2"></p>
										<p class="albumP2"><img src="../images/pic3.jpg" alt="" class="albumPic2"></p>
									</div>
								</a>
							</div>
							<div class="albumACBox clearfix">
								<p class="albumTit">
									<a class="albumName" href="#">一二三四五六七八</a>
								</p>								
								<p class="albumAtt"><a class="btnC" href="#">关注</a></p>
							</div>						
						</li>
					</ul>					
					<ul class="fallList">
						<li>
							<div class="albumMain">
								<a class="albumImgBox" href="#">
									<div class="albumP1"><img src="../images/pic1.jpg" alt="" class="albumPic1"></div>
									<div class="albumPO clearfix">
										<p class="albumP2"><img src="../images/pic3.jpg" alt="" class="albumPic2"></p>
										<p class="albumP2"><img src="../images/pic3.jpg" alt="" class="albumPic2"></p>
										<p class="albumP2"><img src="../images/pic3.jpg" alt="" class="albumPic2"></p>
									</div>
								</a>
							</div>
							<div class="albumACBox clearfix">
								<p class="albumTit">
									<a class="albumName" href="#">一二三四五六七八</a>
								</p>								
								<p class="albumAtt"><a class="btnC" href="#">关注</a></p>
							</div>						
						</li>
						<li>
							<div class="albumMain">
								<a class="albumImgBox" href="#">
									<div class="albumP1"><img src="../images/pic1.jpg" alt="" class="albumPic1"></div>
									<div class="albumPO clearfix">
										<p class="albumP2"><img src="../images/pic3.jpg" alt="" class="albumPic2"></p>
										<p class="albumP2"><img src="../images/pic3.jpg" alt="" class="albumPic2"></p>
										<p class="albumP2"><img src="../images/pic3.jpg" alt="" class="albumPic2"></p>
									</div>
								</a>
							</div>
							<div class="albumACBox clearfix">
								<p class="albumTit">
									<a class="albumName" href="#">一二三四五六七八</a>
								</p>								
								<p class="albumAtt"><a class="btnC" href="#">关注</a></p>
							</div>						
						</li>
					</ul>						<ul class="fallList">
						<li>
							<div class="albumMain">
								<a class="albumImgBox" href="#">
									<div class="albumP1"><img src="../images/pic1.jpg" alt="" class="albumPic1"></div>
									<div class="albumPO clearfix">
										<p class="albumP2"><img src="../images/pic3.jpg" alt="" class="albumPic2"></p>
										<p class="albumP2"><img src="../images/pic3.jpg" alt="" class="albumPic2"></p>
										<p class="albumP2"><img src="../images/pic3.jpg" alt="" class="albumPic2"></p>
									</div>
								</a>
							</div>
							<div class="albumACBox clearfix">
								<p class="albumTit">
									<a class="albumName" href="#">一二三四五六七八</a>
								</p>								
								<p class="albumAtt"><a class="btnC" href="#">关注</a></p>
							</div>						
						</li>
						<li>
							<div class="albumMain">
								<a class="albumImgBox" href="#">
									<div class="albumP1"><img src="../images/pic1.jpg" alt="" class="albumPic1"></div>
									<div class="albumPO clearfix">
										<p class="albumP2"><img src="../images/pic3.jpg" alt="" class="albumPic2"></p>
										<p class="albumP2"><img src="../images/pic3.jpg" alt="" class="albumPic2"></p>
										<p class="albumP2"><img src="../images/pic3.jpg" alt="" class="albumPic2"></p>
									</div>
								</a>
							</div>
							<div class="albumACBox clearfix">
								<p class="albumTit">
									<a class="albumName" href="#">一二三四五六七八</a>
								</p>
								<!-- 已关注，hover变成“取消关注” -->								
								<p class="albumAtt"><a class="btnC" href="#">已关注</a></p>
							</div>						
						</li>
					</ul>						<ul class="fallList">
						<li>
							<div class="albumMain">
								<a class="albumImgBox" href="#">
									<div class="albumP1"><img src="../images/pic1.jpg" alt="" class="albumPic1"></div>
									<div class="albumPO clearfix">
										<p class="albumP2"><img src="../images/pic3.jpg" alt="" class="albumPic2"></p>
										<p class="albumP2"><img src="../images/pic3.jpg" alt="" class="albumPic2"></p>
										<p class="albumP2"><img src="../images/pic3.jpg" alt="" class="albumPic2"></p>
									</div>
								</a>
							</div>
							<div class="albumACBox clearfix">
								<p class="albumTit">
									<a class="albumName" href="#">一二三四五六七八</a>
								</p>								
								<p class="albumAtt"><a class="btnC" href="#">关注</a></p>
							</div>						
						</li>
						<li>
							<div class="albumMain">
								<a class="albumImgBox" href="#">
									<div class="albumP1"><img src="../images/pic1.jpg" alt="" class="albumPic1"></div>
									<div class="albumPO clearfix">
										<p class="albumP2"><img src="../images/pic3.jpg" alt="" class="albumPic2"></p>
										<p class="albumP2"><img src="../images/pic3.jpg" alt="" class="albumPic2"></p>
										<p class="albumP2"><img src="../images/pic3.jpg" alt="" class="albumPic2"></p>
									</div>
								</a>
							</div>
							<div class="albumACBox clearfix">
								<p class="albumTit">
									<a class="albumName" href="#">一二三四五六七八</a>
								</p>								
								<p class="albumAtt"><a class="btnC" href="#">关注</a></p>
							</div>						
						</li>
					</ul>	


				</div>
			</div>
			<!-- /瀑布流 -->

		</div>

		<!-- /main -->

	</div>

	<!-- 弹层蒙层（黑色半透明） -->
	<div class="mask" style="display:none;"></div>
	<!-- 弹层蒙层（黑色半透明） -->

	<!-- 创建专辑弹层 -->
	<div class="xsWLayer addAlbumLayer" style="display:none; top:300px; left:300px;">
		<a class="closeBtn"><span class="xsIcon icon_close"></span></a>
		<div class="WLayerMain">
			<p class="WLayerTit">创建专辑</p>
			<div class="addAForm">
				<dl class="clearfix">
					<dt class="formTit">专辑标题</dt>
					<dd class="formInputBox">
						<p class="formInput"><input type="text" class="layInput"></p>
						<p class="formTip" style="visibility:hidden;"><span class="xsIcon icon_wrong"></span>请输入专辑名</p>
					</dd>
				</dl>
				<dl class="clearfix">
					<dt class="formTit">专辑分类</dt>
					<dd class="formInputBox">
						<p class="formInput">
							<select class="layInput laysel">
								<option>选择分类</option>
							</select>
						</p>
						<p class="formTip"><span class="xsIcon icon_wrong"></span>请选择分类</p>
					</dd>
				</dl>
				<p class="formBtn"><a class="btnD" href="#">创建画板</a></p>
			</div>

		</div>

	</div>

	<!-- /创建专辑弹层 -->
</body>
</html>
